<template>
	<view>
		<page-meta>
			<navigation-bar :title="areaData.name"></navigation-bar>
		</page-meta>
		<u-tabs :list="tabData" lineWidth="30" lineColor="#1677ff" :scrollable="false" @change="changeTab"></u-tabs>
		<view class="inner">
			<!-- 图片 -->
			<view class="inner_box" v-if="currentTab.name === '图片'">
				<image class="inner_item" v-for="(item,index) in areaData.images" :key="item.id"
					@click="preImage(item.path)" mode="scaleToFill" :src="item.path">
				</image>
			</view>
			<!-- 视频 -->
			<view class="inner_box" v-if="currentTab.name === '视频'">
				<video class="inner_video" v-for="item in areaData.videos" :key="item.id" :src="item.path"
					object-fit="contain"></video>
			</view>
			<!-- 介绍 -->
			<view class="introduce_box" v-if="currentTab.name === '介绍'">
				<rich-text :nodes="areaData.content" :preview="true"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		areaDetail
	} from "@/api/api.js"
	export default {
		data() {
			return {
				tabData: [{
						name: "图片",
					},
					{
						name: "视频",
					},
					{
						name: "介绍",
					}
				],
				currentTab: {},
				id: "",
				areaData: {
					images: []
				}

			};
		},
		// 初始化
		onLoad(e) {
			this.id = e.id;
			this.currentTab = {
				name: "图片"
			};
			uni.showLoading({
				title: "加载中",
				mask: true
			});
			this.getData();
		},
		// 下拉
		onPullDownRefresh() {
			uni.showLoading({
				title: "加载中",
				mask: true
			});
			this.getData('isPull');
		},
		methods: {
			// rq
			getData(type = '') {
				areaDetail(this.id).then(r => {
					this.areaData = r.data;
					uni.hideLoading();
					if (type === 'isPull') {
						uni.stopPullDownRefresh();
						uni.showToast({
							title: "刷新成功",
							icon: "success",

						})
					}
				})
			},
			// tab切换
			changeTab(v) {
				this.currentTab = v;
				console.log(this.currentTab.name)
			},
			// 预览图片
			preImage(v) {
				uni.previewImage({
					current: v,
					urls: this.areaData.images.map(v => v.path)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.inner {
		padding: 0 10rpx;
		margin-top: 10rpx;
	}

	.inner_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		>.inner_item {
			margin-bottom: 10rpx;
			height: 120rpx;
			min-width: 32%;
			max-width: 32%;
			flex: 1;
		}

		>.inner_video {
			margin-bottom: 10rpx;
			height: 160rpx;
			min-width: 49%;
			max-width: 49%;
			flex: 1;
		}
	}
</style>
